<script setup>
import Line from './line.vue'
import { Bpage, lineData } from '../common'

const xData = ref([])
const yData = ref([])

const xData2 = ref([])
const yData2 = ref([])

const xData3 = ref([])
const yData3 = ref([])

const getData = () => {
  let a = parseInt(Math.random() * (400 + 1))
  let b = parseInt(Math.random() * (400 + 1))
  let c = parseInt(Math.random() * (400 + 1))
  let d = parseInt(Math.random() * (400 + 1))
  let e = parseInt(Math.random() * (400 + 1))
  let f = parseInt(Math.random() * (400 + 1))
  let g = parseInt(Math.random() * (400 + 1))
  let arr = [a, b, c, d, e, f, g]
  let arr1 = [b, a, c, f, d, g, e,]

  // 图表一
  xData.value = ['2023年5', '2023年8', '2023年10', '2023年12', '2024年2', '2024年4', '2024年7']
  yData.value = [
    { name: '电导率', data: arr, startColor: 'rgb(235, 162, 78)', endColor: 'rgb(255, 231, 197)' },
  ]

  // 图表二
  xData2.value = ['2023年5', '2023年8', '2023年10', '2023年12', '2024年2', '2024年4', '2024年7']
  yData2.value = [
    { name: '颗粒度', data: arr1, startColor: 'rgb(17, 112, 15)', endColor: 'rgb(138, 218, 154)' },
    // { name: '电导率1', data: arr1, startColor: 'rgb(128, 255, 165)', endColor: 'rgb(1, 191, 236)' },
  ]

  // 图表三
  xData3.value = ['2023年5', '2023年8', '2023年10', '2023年12', '2024年2', '2024年4', '2024年7']
  yData3.value = [
    { name: '铁磁30-50um', data: arr1, startColor: '#db2777', endColor: '#f9a8d4' },
    { name: '铁磁50-100um', data: arr1, startColor: '#b45309', endColor: '#fcd34d' },
    { name: '非铁磁120-200um', data: arr1, startColor: 'rgb(1, 255, 165)', endColor: 'rgb(1, 191, 136)' },
  ]


}

getData()

setInterval(() => {
  getData()
}, 3000)


// const all = ref([
//   { name: '非铁磁磨砺总数', value: '37.8' },
//   { name: '非铁磁24H总数', value: '61.84' },
//   { name: '非铁磁磨砺浓度', value: '57.12' },
// ])


const emit = defineEmits(["dblclickEcharts"])
const tabLineItem = (item) => emit('dblclickEcharts', item)
</script>

<template>
  <div class="w-full h-full flex flex-col">
    <div class="h-[13%] xwxs:(hidden ) xwsm:(flex)"></div>
    <div
      class=" flex flex-wrap gap-[16px] flex-1  xwxs:(px-[0px]  pb-[66px]) xwsm:(px-[66px] overflow-y-auto  pb-[0px])">
      <!--  -->
      <template v-for="(item, index) in lineData" :key="index">
        <div @dblclick="tabLineItem(index)"
          class=" rounded-[22px] p-[10px] xwxs:(h-[900px] w-full mt-[66px]) xwmd:(w-[32.6%] h-[39.2%] mt-[24px])"
          style="background: #FFFFFF;box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);">
          <Line :yData='item.ydata' :xData='item.xdata' :markline="item.markline">
          </Line>
        </div>
      </template>



      <!-- <div class="w-[32.6%] h-[39.2%] rounded-[22px] mt-[24px]  p-[10px]"
        style="background: #FFFFFF;box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);">
        <Line title="颗粒度" :yData='yData2' :xData='xData2'></Line>
      </div>

      <div class="w-[32.6%] h-[39.2%] rounded-[22px] mt-[24px] p-[10px]"
        style="background: #FFFFFF;box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);">
        <Line title="ivf5密度:kg/m3" :yData='yData' :xData='xData'></Line>
      </div>


      <div class="w-[32.6%] h-[39.2%] rounded-[22px] mt-[24px] p-[10px]"
        style="background: #FFFFFF;box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);">
        <Line :topAll="all" :yData='yData3' :xData='xData3'></Line>
      </div>


      <div class="w-[32.6%] h-[39.2%] rounded-[22px] mt-[24px] p-[10px]"
        style="background: #FFFFFF;box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);">
        <Line :topAll="all" :yData='yData3' :xData='xData3'></Line>
      </div>

      <div class="w-[32.6%] h-[39.2%] rounded-[22px] mt-[24px] p-[10px]"
        style="background: #FFFFFF;box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);">
        <Line :topAll="all" :yData='yData3' :xData='xData3'></Line>
      </div> -->


    </div>
  </div>
</template>

<style scoped></style>
